<template>
	<view class="f-btm" :style="[viewStyle]">
		<view :style="[bodyStyle]">
			<view class="btm-btm-box e-flex">
				<view class="menu-list e-flex e-flex-between e-flex-items-start e-flex-1" :style="[menuStyle]">
					<view class="menu-item text-center e-flex e-flex-column" @tap="handleTapHomeIcon" v-if="option.showHomeIcon">
						<image :src="$fullLink(option.homeIconUrl)" class="img-36" v-if="option.homeIconUrl"></image>
						<text class="iconfont icon-a-Group2Copy e-font-36 c-primary" v-else></text>
						<view :style="[homeTextStyle]">{{ option.homeText||$t('common.首页') }}</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<template v-if="option.showContactIcon">
						<view
							class="menu-item text-center e-flex e-flex-column"
							v-if="option.contactLink && Object.keys(option.contactLink).length > 0"
							@tap="handleTapContactIcon"
						>
							<image :src="$fullLink(option.contactIconUrl)" class="img-36" v-if="option.contactIconUrl"></image>
							<image class="img-36" :src="$staticPath('classify/contact.png')" v-else></image>
							<view :style="[contactTextStyle]">{{ option.contactText||$t('classify.客服') }}</view>
						</view>
						<button open-type="contact" show-message-card class="app-mp-contact-btn menu-item text-center e-flex e-flex-column" v-else>
							<image :src="$fullLink(option.contactIconUrl)" class="img-36" v-if="option.contactIconUrl"></image>
							<image class="img-36" :src="$staticPath('classify/contact.png')" v-else></image>
							<view :style="[contactTextStyle]">{{ option.contactText||$t('classify.客服') }}</view>
						</button>
					</template>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="menu-item text-center e-flex e-flex-column" v-if="option.showContactIcon" @tap="handleTapContactIcon">
						<image :src="$fullLink(option.contactIconUrl)" class="img-36" v-if="option.contactIconUrl"></image>
						<image class="img-36" :src="$staticPath('classify/contact.png')" v-else></image>
						<view :style="[contactTextStyle]">{{ option.contactText||$t('classify.客服') }}</view>
					</view>
					<!-- #endif -->
					<view class="menu-item text-center e-flex e-flex-column" @tap="handleTapCollect" v-if="option.showCollectIcon">
						<!-- <image :src="$fullLink(option.collectIconUrl)" class="img-36" v-if="option.collectIconUrl"></image> -->
						<image
							class="img-36"
							:class="[startAnimation && 'scale-animation']"
							:src="option.collectIconUrl ? $fullLink(option.collectIconUrl) : $staticPath('classify/collected.png')"
							v-if="info.hasCollected == 1"
						></image>
						<image class="img-36" :src="option.collectActiveIconUrl ? $fullLink(option.collectActiveIconUrl) : $staticPath('classify/collect.png')" v-else></image>
						<!-- <image class="img-36" :src="$staticPath(`classify/collect${info.hasCollected == 1 ? 'ed' : ''}.png`)" v-else></image> -->
						<view :style="[collectTextStyle]">{{ option.collectText||$t('classify.收藏') }}</view>
					</view>
				</view>
				<slot name="rightBtn">
					<view class="e-flex-1 e-m-l-30">
						<view class="trace-buy-btn-box" v-if="isTrace">
							<button
								class="buy c-white"
								:class="[$isEnglishVersion ? 'e-font-24' : 'e-font-28']"
								@tap="$emit('buy')"
								:style="[buyButtonStyle]"
								v-if="option.showBuyButton"
							>
								{{ option.buyButtonText || $t('classify.立即购买') }}
							</button>
						</view>
						<view class="buy-btn-box e-flex" v-else>
							<button
								class="cart c-white"
								:class="{ 'cart-1': info.type === 2, 'e-font-24': $isEnglishVersion, 'e-font-28': !$isEnglishVersion }"
								@tap="handleToAddCart"
								:style="[cartButtonStyle]"
								v-if="option.showCartButton"
							>
								{{ option.cartButtonText || $t('nearby.加入购物车') }}
							</button>
							<button
								class="buy c-white"
								:class="[$isEnglishVersion ? 'e-font-24' : 'e-font-28']"
								@tap="$emit('buy')"
								:style="[buyButtonStyle]"
								v-if="option.showBuyButton"
							>
								{{ option.buyButtonText || $t('classify.立即购买') }}
							</button>
						</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useCurrentInstance } from '@/common/hooks';
import { px2rpx } from '@/components/list/utils';
import { useLayoutCompoments } from '@/components/list/hooks';
import type { pageLink } from '@/components/list/type';
import type { GoodsInfo } from '../type';
import { useInit } from '@/common/stores';
import { postAddCollect, postDelCollect, getStoreUserThirdId } from '@/common/request/api';

const props = withDefaults(
	defineProps<{
		info: GoodsInfo;
		isTrace: boolean;
		option: {
			layoutType: 1 | 2;
			// 背景色
			backgroundColor: string;
			//边距
			paddingTop: number;
			paddingBottom: number;
			paddingX: number;
			//圆角
			radiusTop: number;
			// 是否显示首页
			showHomeIcon: boolean;
			// 首页图标-图标地址
			homeIconUrl: string;
			// 首页文本
			homeText: string;
			// 首页文本颜色
			homeTextColor: string;
			// 自定义点击首页的跳转链接
			homeLink: pageLink;
			// 是否显示客服
			showContactIcon: boolean;
			// 客服图标-图标地址
			contactIconUrl: string;
			// 客服文本
			contactText: string;
			// 客服文本颜色
			contactTextColor: string;
			// 自定义点击客服的跳转链接
			contactLink: pageLink;
			// 是否显示收藏
			showCollectIcon: boolean;
			// 收藏图标-高亮图标地址
			collectActiveIconUrl: string;
			// 收藏图标-图标地址
			collectIconUrl: string;
			// 收藏文本
			collectText: string;
			// 收藏文本颜色
			collectTextColor: string;
			// 是否显示购物车按钮
			showCartButton: boolean;
			// 购物车按钮文本
			cartButtonText: string;
			// 购物车按钮圆角
			cartButtonRadius: number;
			// 是否显示购买按钮
			showBuyButton: boolean;
			// 购买按钮文本
			buyButtonText: string;
			// 购买按钮圆角
			buyButtonRadius: number;
		};
	}>(),
	{
		option: () => ({
			layoutType: 1,
			backgroundColor: 'rgba(255, 255, 255, 1)',
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			showHomeIcon: true,
			homeIconUrl: '',
			homeText: '',
			homeTextColor: 'rgba(102, 102, 102, 1)',
			homeLink: {
				pageUrl: '',
				linkUrl: ''
			},
			showContactIcon: true,
			contactIconUrl: '',
			contactText: '',
			contactTextColor: 'rgba(102, 102, 102, 1)',
			contactLink: {
				pageUrl: '',
				linkUrl: ''
			},
			showCollectIcon: true,
			collectActiveIconUrl: '',
			collectIconUrl: '',
			collectText: '',
			collectTextColor: 'rgba(102, 102, 102, 1)',
			showCartButton: true,
			cartButtonText: '',
			cartButtonRadius: 20,
			showBuyButton: true,
			buyButtonText: '',
			buyButtonRadius: 20
		})
	}
);

const emit = defineEmits(['setBottomHeight', 'addCart', 'collect']);

const ctx = useCurrentInstance();
const initStore = useInit();

const { jumpLink } = useLayoutCompoments(ctx, props.option);

const viewStyle = computed(() => {
	return {
		padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${props.option.paddingBottom}px ${px2rpx(props.option.paddingX)}`
	};
});

const bodyStyle = computed(() => {
	return {
		backgroundColor: props.option.backgroundColor,
		borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} 0 0 `
	};
});
const menuStyle = computed(() => {
	return {
		minWidth: props.option.layoutType === 1 ? '260rpx' : '240rpx'
	};
});

const homeTextStyle = computed(() => {
	return { color: props.option.homeTextColor };
});
const contactTextStyle = computed(() => {
	return { color: props.option.contactTextColor };
});
const collectTextStyle = computed(() => {
	return { color: props.option.collectTextColor };
});

const cartButtonStyle = computed(() => {
	return {
		borderRadius:
			props.option.layoutType === 1 && props.option.showBuyButton
				? `${px2rpx(props.option.cartButtonRadius)} 0 0 ${px2rpx(props.option.cartButtonRadius)}`
				: px2rpx(props.option.cartButtonRadius),
		marginRight: props.option.layoutType === 1 ? 0 : '20rpx'
	};
});

const buyButtonStyle = computed(() => {
	return {
		borderRadius:
			props.option.layoutType === 1 && props.option.showCartButton && !props.isTrace
				? ` 0 ${px2rpx(props.option.buyButtonRadius)} ${px2rpx(props.option.buyButtonRadius)} 0`
				: px2rpx(props.option.buyButtonRadius)
	};
});

const handleToAddCart = () => {
	if (props.info.type === 1) emit('addCart');
};
const handleTapHomeIcon = () => {
	if (props.option.homeLink && Object.keys(props.option.homeLink).length > 0) {
		jumpLink(props.option.homeLink);
	} else {
		initStore.setTabbarPageIndex(0);
		ctx.$switchTab('/pages/tabbar/index');
	}
};
const handleTapContactIcon = () => {
	if (props.option.contactLink && Object.keys(props.option.contactLink).length > 0) {
		jumpLink(props.option.contactLink);
	} else {
		getStoreUserThirdId({ userThirdId: props.info.storeId }).then((res) => {
			ctx.$goTo('/pages/public/msg/detail', { gId: props.info.id, user: res.data.chatlinkid, bId: res.data.chat.bizid, sId: props.info.storeId, name: props.info.storeName });
		});
	}
};
const startAnimation = ref(false);
const handleTapCollect = () => {
	let api = postAddCollect;
	if (props.info.hasCollected == 1) {
		api = postDelCollect;
	}
	api(
		{
			targetId: props.info.id
		},
		1
	).then(() => {
		const type = props.info.hasCollected == 1 ? 0 : 1;
		emit('collect', type);
		if (type) {
			startAnimation.value = true;
			setTimeout(() => {
				startAnimation.value = false;
			}, 600);
		}
	});
};

let height = 62;
if (props.option.paddingTop) {
	height += props.option.paddingTop;
}
if (props.option.paddingBottom) {
	height += props.option.paddingBottom;
}
emit('setBottomHeight', height);
</script>

<style lang="scss" scoped>
.f-btm {
	position: fixed;
	bottom: 0;
	width: 100vw;
	z-index: $z-index-high;
	background-color: #ffffff;

	.btm-btm-box {
		height: 62px;
		padding: 0 30rpx;

		.menu-list {
			min-width: 260rpx;

			.menu-item {
				flex: 1;
				color: #666666;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}

				> view {
					@include fontH(22, 32);
					margin-top: 10rpx;
				}
			}
		}

		.trace-buy-btn-box {
			.buy {
				background: var(--color-primary);
				height: 44px;
				line-height: 44px;
				text-align: center;
				font-weight: 600;
				padding: 0;
			}
		}

		.buy-btn-box {
			button {
				min-width: 214rpx;
				flex: 1;
				height: 44px;
				min-width: 200rpx;
				line-height: 44px;
				text-align: center;
				font-weight: 600;
				padding: 0;
			}

			.cart {
				background: #333333;
			}

			.cart-1 {
				opacity: 0.1;
			}

			.buy {
				background: var(--color-primary);
			}
		}
	}
}
</style>
